<template>
  <div class="infobox">
    <div class="info-head">
      <h3>个人中心</h3>
      <div class="user-img" @click="changeAvatarShow">
        <img
          :src="
            userInfo.avatar === 'http://124.93.196.45:10001/prod-api/'
              ? 'https://img2.baidu.com/it/u=377342965,521277409&fm=253&fmt=auto&app=138&f=PNG?w=320&h=320'
              : userInfo.avatar
          "
        />
        <div class="info-user">
          <p>{{ userInfo.nickName }}</p>
          <p>{{ phonenum }}</p>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>

    <div class="info-content">
      <ul>
        <li @click="show = true">个人信息 <van-icon name="arrow" /></li>
        <li @click="changeOrderShow">订单列表 <van-icon name="arrow" /></li>
        <li @click="changeRePwdShow">修改密码 <van-icon name="arrow" /></li>
        <li @click="changeFeedbackShow">意见反馈 <van-icon name="arrow" /></li>
      </ul>
    </div>
    <div class="info-close" @click="logoutUser">退出登录</div>
    <!-- 个人信息遮罩层 -->
    <van-overlay :show="show" z-index="12">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="userInfo-head" @click="goBack">返回</div>
          <div class="info-content">
            <van-field v-model="info.nickName" label="用户昵称" type="text" />
            <van-field label="账号ID" :value="userInfo.userName" readonly />
            <van-field v-model="info.idCard" label="身份证号" />
            <van-field v-model="info.email" label="邮箱" />
            <van-field v-model="info.phonenumber" type="tel" label="手机号" />
            <van-radio-group v-model="info.sex">
              <span>性别：</span>
              <van-radio name="0">男</van-radio>
              <van-radio name="1">女</van-radio>
            </van-radio-group>
          </div>
          <div class="info-btn" @click="changeUserDate(info)">确认修改</div>
        </div>
      </div>
    </van-overlay>
    <!-- 重置密码 组件-->
    <van-popup v-model="rPwdShow" closeable>
      <resetpwd-vue @changeRePwdShow="changeRePwdShow"></resetpwd-vue>
    </van-popup>

    <!-- 意见反馈 组件-->
    <van-popup v-model="feedbackShow" closeable>
      <feedback-vue @changeFeedbackShow="changeFeedbackShow"></feedback-vue>
    </van-popup>

    <!-- 订单列表 组件 -->
    <van-popup v-model="myorderShow" closeable>
      <order-vue @changeOrderShow="changeOrderShow"></order-vue>
    </van-popup>
    <!-- avatar 头像上传 -->
    <van-popup v-model="avatarShow" closeable>
      <avatar-vue
        @changeAvatarShow="changeAvatarShow"
        @updateAvatar="updateAvatar"
      ></avatar-vue>
    </van-popup>
  </div>
</template>

<script>
import { userInfo, editUser } from "@/service/mineService";
import resetpwdVue from "./sonCmp/ChangePwd.vue";
import feedbackVue from "./sonCmp/FeedbackView.vue";
import orderVue from "./sonCmp/OrderView.vue";
import avatarVue from "./sonCmp/avatarView.vue";
export default {
  components: { resetpwdVue, feedbackVue, orderVue, avatarVue },
  data() {
    return {
      avatarShow: false, // 头像上传
      rPwdShow: false, //重置密码
      feedbackShow: false, // 意见反馈遮罩层
      phonenum: "",
      myorderShow: false, //订单信息遮罩层
      show: false, // 个人信息遮罩层
      userInfo: {}, //个人信息
      info: {}, // 默认个人信息  渲染个人信息页码
    };
  },

  methods: {
    goBack() {
      this.show = false;
    },
    //注销登录
    async logoutUser() {
      window.localStorage.removeItem("token");
      this.$router.push("/");
    },
    //根据上传头像
    updateAvatar(url) {
      const avatarUrl = url.replace("/profile", ":10001/prod-api/profile");
      this.userInfo.avatar = avatarUrl;
      this.info.avatar = url;
      this.changeUserDate(this.info);
    },
    //改变头像上传框状态
    changeAvatarShow() {
      this.avatarShow = !this.avatarShow;
    },
    // 改变重置密码框状态
    changeRePwdShow() {
      this.rPwdShow = !this.rPwdShow;
    },
    // 改变订单框状态
    changeOrderShow() {
      this.myorderShow = !this.myorderShow;
    },
    //改变意见反馈框状态
    changeFeedbackShow() {
      this.feedbackShow = !this.feedbackShow;
    },
    // 修改个人信息
    async changeUserDate(info) {
      // console.log(info);
      const { data } = await editUser(info);
      // console.log(data);
      if (data.code !== 200) return this.$toast(data.msg);
      this.$toast("修改成功");
      this.getUserInfo();
      this.show = false;
    },
    //获取 个人信息
    async getUserInfo() {
      const { data } = await userInfo();
      // console.log(data);
      if (data.code !== 200) this.$toast(data.msg);
      // https://img2.baidu.com/it/u=377342965,521277409&fm=253&fmt=auto&app=138&f=PNG?w=320&h=320
      this.userInfo = data.user;
      if (this.userInfo.avatar) {
        this.userInfo.avatar = this.userInfo.avatar.replace(
          "/profile",
          ":10001/prod-api/profile"
        );
      }

      // 设计默认头像
      if (!this.userInfo.avatar) {
        this.userInfo.avatar =
          "http://124.93.196.45:10001/prod-api/" + this.userInfo.avatar;
      }
      // 渲染手机号数据
      this.phonenum =
        data.user.phonenumber.slice(0, 3) +
        "******" +
        data.user.phonenumber.slice(8, 11);
      // 根据返回数据设计一套默认值
      this.info = {
        nickName: this.userInfo.nickName,
        idCard: this.userInfo.idCard,
        email: this.userInfo.email,
        phonenumber: this.userInfo.phonenumber,
        sex: this.userInfo.sex,
        // avatar: this.userInfo.avatar,
      };
    },
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style lang="scss" scoped>
.infobox {
  background: #eeeeee;

  .info-head {
    padding-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
    background: #fff;
    height: 100px;

    h3 {
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      font-weight: 800;
    }
    .user-img {
      display: flex;
      justify-content: space-between;
      height: 60px;
      img {
        width: 60px;
        height: 100%;
      }
      i {
        height: 60px;
        line-height: 60px;
        color: #999;
      }
      .info-user {
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: center;
        p {
          font-size: 16px;
          height: 20px;
          line-height: 20px;
        }
      }
    }
  }
  .info-content {
    margin-top: 10px;
    background: #fff;

    ul {
      li {
        color: #999;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        padding-left: 30px;
        padding-right: 20px;
        display: flex;
        justify-content: space-between;
        i {
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
  .info-close {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    margin: 100px 10px 100px 10px;
    background: red;
    border-radius: 5px;
    text-align: center;
  }
  // 个人信息遮罩层样式
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 100%;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #fff;
    .userInfo-head {
      height: 100px;
      font-size: 20px;
      line-height: 100px;
      text-align: right;
      padding-right: 30px;
    }
    .van-radio-group {
      padding-left: 20px;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      color: #6b90b4;
      display: flex;
      span {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        margin-right: 10px;
      }
      .van-radio {
        margin-right: 20px;
      }
    }
    .info-btn {
      margin-top: 80px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      border-radius: 5px;
      background: red;
      color: #fff;
    }
  }
}
</style>
